<template>
  <div class="home">
    <div class="home-item">
      <div class="banner">
        <div class="banner-img">
          <!-- <img src="./../../assets/imgs/home-img/sy-index.png" alt="" /> -->
        </div>
        <div class="banner-content">
          <div class="content-index">
            <div class="index-title">多卡BIN选择</div>
            <div class="index-title-2">A VARIETY OF CARD BIN OPTIONS</div>
            <div class="index-text">
              一個賬號解決全球全幣種付款，可以滿足所有幣種的用卡需求
            </div>
            <img
              src="../../assets/imgs/home-img/bgf.png"
              alt=""
              class="img-content"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="home-item">
      <div class="banner">
        <div class="banner-img cptd-bg">
          <!-- <img src="./../../assets/imgs/home-img/sy-index.png" alt="" /> -->
          <div class="banner-msg-box">
            <div class="index-title">产品特点</div>
            <div class="index-title-2">PRODUCT FEATURES</div>
            <div class="msg-index">
              <div class="msg-item-box">
                <div class="msg-item">
                  <div class="msg-item-icon">
                    <img src="../../assets/imgs/home-icon/zzht.svg" alt="" />
                  </div>
                  免费用户 无限开卡
                </div>
                <div class="msg-item">
                  <div class="msg-item-icon">
                    <img src="../../assets/imgs/home-icon/ggtf.svg" alt="" />
                  </div>
                  免费用户 无限开卡
                </div>
                <div class="msg-item">
                  <div class="msg-item-icon">
                    <img src="../../assets/imgs/home-icon/zxcz.svg" alt="" />
                  </div>
                  免费用户 无限开卡
                </div>
              </div>
              <div class="msg-item-img">
                <img src="../../assets/imgs/home-img/cptd.png" alt="" />
              </div>
              <div class="msg-item-box">
                <div class="msg-item">
                  <div class="msg-item-icon">
                    <img src="../../assets/imgs/home-icon/mfkh.svg" alt="" />
                  </div>
                  免费用户 无限开卡
                </div>
                <div class="msg-item">
                  <div class="msg-item-icon">
                    <img src="../../assets/imgs/home-icon/BIN.svg" alt="" />
                  </div>
                  免费用户 无限开卡
                </div>
                <div class="msg-item">
                  <div class="msg-item-icon">
                    <img src="../../assets/imgs/home-icon/avsvcc2.svg" alt="" />
                  </div>
                  免费用户 无限开卡
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-content">
          <div class="content-index">
            <div class="index-title">全平台支持 跨境无障碍</div>
            <div class="index-title-2">
              THE WHOLE PLATFORM SUPPORTS CROSS-BORDER BARRIER-FREE
            </div>
            <!-- <div class="index-text">
              一個賬號解決全球全幣種付款，可以滿足所有幣種的用卡需求
            </div> -->
            <img
              src="../../assets/imgs/home-img/support-bg.png"
              alt=""
              class="img-content"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="home-item">
      <div class="banner">
        <div class="banner-img registaration-bg">
          <!-- <img src="./../../assets/imgs/home-img/sy-index.png" alt="" /> -->
          <div class="banner-msg-box">
            <div class="index-title">快速注册 轻松办卡</div>
            <div class="index-title-2">
              QUICK REGISTARATION EASY CARD OPENING
            </div>
            <div class="index-text" style="color: #fff; margin: 1.5rem 0">
              全自助后台，仅需两分钟完成从注册到开卡
            </div>
            <div class="msg-index">
              <div class="msg-icon-text-item">
                <div class="msg-icon">
                  <img src="../../assets/imgs/home-icon/yhtj.svg" alt="" />
                </div>
                <div class="msg-text-title">01 免费注册</div>
                <div class="msg-text-txt">"0"费用轻松三步</div>
                <div class="msg-text-txt">快速注册后台账号，无需人工介入</div>
                <div class="msg-text-txt">全自动系统审核</div>
              </div>
              <div class="msg-icon-text-item">
                <div class="msg-icon">
                  <img src="../../assets/imgs/home-icon/zzht.svg" alt="" />
                </div>
                <div class="msg-text-title">02 在线充值</div>
                <div class="msg-text-txt">通过微信，支付宝</div>
                <div class="msg-text-txt">实时给账户充值，无需等待人工入金</div>
                <div class="msg-text-txt">资金立即到账</div>
              </div>
              <div class="msg-icon-text-item">
                <div class="msg-icon">
                  <img src="../../assets/imgs/home-icon/sckp.svg" alt="" />
                </div>
                <div class="msg-text-title">03 生成卡片</div>
                <div class="msg-text-txt">根据页面导航，选择</div>
                <div class="msg-text-txt">需要开出的卡BIN，秒速出卡</div>
                <div class="msg-text-txt">无需等待</div>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-content">
          <div class="content-index">
            <div class="index-title">入账简便快捷 币种实时转换</div>
            <div class="index-title-2">
              EASY AND CONVENIENT ONBOARDING REAL-TIME CURRENCY CONVERSION
            </div>
            <div class="msg-small-box">
              <div class="msg-small-item">
                <div class="small-icon">
                  <img src="../../assets/imgs/home-icon/jsrz.svg" alt="" />
                </div>
                <div class="small-title index-title-2">实时入账</div>
                <div class="small-text">
                  支持市面上的所有主流的付款方式，包括微信、支付宝、云闪付等，同时可使用用户个人账户或者企业账户进行入账
                </div>
              </div>
              <div class="msg-small-item">
                <div class="small-icon">
                  <img src="../../assets/imgs/home-icon/hbzh.svg" alt="" />
                </div>
                <div class="small-title index-title-2">币种转换</div>
                <div class="small-text">
                  拥有多币种电子钱包，允许用户在不同的币种钱包之间进行转化，实时汇率，不必担心造成汇率上的损失
                </div>
              </div>
              <div class="msg-small-item">
                <div class="small-icon">
                  <img src="../../assets/imgs/home-icon/zfkx.svg" alt="" />
                </div>
                <div class="small-title index-title-2">支付款项</div>
                <div class="small-text">
                  多卡BIN多币种虚拟卡，可以满足几乎市面上所有平台付款需求，协助您的业务走向全球
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-item">
      <div class="banner">
        <div class="banner-img fund-bg">
          <!-- <img src="./../../assets/imgs/home-img/sy-index.png" alt="" /> -->
          <div class="banner-msg-box">
            <div class="index-title">资金安全 全程保障</div>
            <div class="index-title-2">
              THE SAFETY OF FUNDS IS GUARANTEED THROUGHOUT THE PROCESS
            </div>
            <div class="msg-index">
              <div class="msg-img-text-box">
                <div class="msg-img-box">
                  <img src="../../assets/imgs/home-img/msg-img.png" alt="" />
                </div>
                <div class="msg-img-text">
                  <div class="img-text-item">
                    <div class="img-title">
                      <img src="../../assets/imgs/home-icon/rzhj.svg" alt="" />
                      <div class="img-title-text">
                        <div class="title-text index-title-2">入账环节</div>
                        <div class="text-txt">
                          收款渠道(微信、支付宝等)，银行确保资金转入账户可控
                        </div>
                      </div>
                    </div>
                    <div class="img-content">
                      收款渠道机构及银行需要核实每笔资金的来源，同时对已进入企业账户的资金限制转出对象，确保资金最终用于用户。
                    </div>
                  </div>
                  <div class="img-text-item">
                    <div class="img-title">
                      <img src="../../assets/imgs/home-icon/zfhj.svg" alt="" />
                      <div class="img-title-text">
                        <div class="title-text index-title-2">支付环节</div>
                        <div class="text-txt">
                          支付对象受发卡机构限制，确保支付对象属于合规对象
                        </div>
                      </div>
                    </div>
                    <div class="img-content">
                      所有用户使用的平台都受到卡BIN所属发卡机构的限制，不合规和违法的平台将无法进行支付。
                    </div>
                  </div>
                  <div class="img-text-item">
                    <div class="img-title">
                      <img src="../../assets/imgs/home-icon/jshj.svg" alt="" />
                      <div class="img-title-text">
                        <div class="title-text index-title-2">结算环节</div>
                        <div class="text-txt">VISA、MASTER监管资金去向</div>
                      </div>
                    </div>
                    <div class="img-content">
                      VISA 和
                      MASTER负责资金的清算并返回支付结果，确保每笔资金流动都清晰可查。
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-content">
          <div class="content-index">
            <div class="index-title">适用行业与人群</div>
            <div class="index-title-2">APPLICABLE INDUSTRIES AND PEOPLE</div>
            <div class="msg-small-box">
              <div class="msg-img-text-item">
                <div class="text-box">
                  <div class="text-box-title">跨境电商</div>
                  <div class="text-box-txt">
                    独立站运营费用；亚马逊、速卖通等租金及广告费用；域名购买、服务器租赁等费用。
                  </div>
                </div>
                <div class="img-box">
                  <img src="../../assets/imgs/home-img/kjds.png" alt="" />
                </div>
              </div>
              <div class="msg-img-text-item">
                <div class="text-box">
                  <div class="text-box-title">海外广告</div>
                  <div class="text-box-txt">
                    轻松支付 Facebook、Google、YouTube、Debit 等平台广告费。
                  </div>
                </div>
                <div class="img-box">
                  <img src="../../assets/imgs/home-img/hwgg.png" alt="" />
                </div>
              </div>
              <div class="msg-img-text-item">
                <div class="text-box">
                  <div class="text-box-title">海外购物</div>
                  <div class="text-box-txt">
                    解决海外网站购买、海外游戏付款、软件订阅付款等需求。
                  </div>
                </div>
                <div class="img-box">
                  <img src="../../assets/imgs/home-img/hwgw.png" alt="" />
                </div>
              </div>
              <div class="msg-img-text-item">
                <div class="text-box">
                  <div class="text-box-title">其他海外业务</div>
                  <div class="text-box-txt">
                    海外服务器租赁、海外域名购买、企业海外机票、酒店预订等。
                  </div>
                </div>
                <div class="img-box">
                  <img src="../../assets/imgs/home-img/qthwyw.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-item">
      <div class="banner">
        <div class="banner-img about-bg">
          <!-- <img src="./../../assets/imgs/home-img/sy-index.png" alt="" /> -->
          <div class="banner-msg-box">
            <div class="index-title">关于我们</div>
            <div class="index-title-2">ABOUT US</div>
            <div class="msg-index">
              <div class="msg-img-text-box">
                <div class="msg-img-box">
                  <img src="../../assets/imgs/home-img/about-icon.png" alt="" />
                </div>
                <div class="msg-img-content">
                  <div class="content-txt">
                    海淘国际是一家致力于打造粤港澳大湾区最大的跨境商务圈综合服务供应商平台，为国内跨境电商企业提供安全便捷、高性价比的智慧产品与服务，为中国贸易商事业出海保驾护航;
                  </div>
                  <div class="content-txt" style="margin-top: 2rem">
                    旗下产品【WisdomPay】是一款由银行与卡组织共同开发，并由知名机构提供技术服务联合推出的一款商务虚拟卡，旨在为各大交易场景解决用户隐私保护、安全及快捷支付的需求。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-content">
          <div class="content-index">
            <div class="index-title">商务合作</div>
            <div class="index-title-2">BUSINESS COOPERATION</div>
            <div class="index-text">
              欢迎相关行业服务企业与我们合作，共同打造跨境支付综合服务供应商平台
            </div>
            <div class="business-img-txt-box">
              <div class="business-img-box">
                <img src="../../assets/imgs/home-img/contact.png" alt="" />
              </div>
              <div class="business-txt-box">
                <div class="business-txt-item">
                  <div class="business-title">代理加盟</div>
                  <div class="business-txt">
                    欢迎具有业内经验和成熟团队的企业加入我们，申请代理商的基本条件：<br />
                    1.拥有正常经营的企业；<br />
                    2.企业拥有状态正常的银行账户；<br />
                    3.拥有成熟的经营团队。<br />
                  </div>
                </div>
                <div class="business-txt-item">
                  <div class="business-title">同业合作</div>
                  <div class="business-txt">
                    同业交流，共同成长。<br />
                    通过有效整合现有商业优势，开展相互交叉合作，实现同业间的互相成长与协同进步。智汇跨境始终相信，只有放下对同行业的成见，才能为行业发展带来更加美好的未来，为跨境创业者提供更优质的服务。
                  </div>
                </div>
                <div class="business-txt-item">
                  <div class="business-title">跨境服务合作</div>
                  <div class="business-txt">
                    相辅相成，促进发展<br />
                    最大化各自领域里的优势。通过对资源、流量、客源进行最大化的转化，提高各行业的有效转化，共同成长，共同进步。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-item">
      <div class="banner">
        <div class="banner-img pay-bg">
          <!-- <img src="./../../assets/imgs/home-img/sy-index.png" alt="" /> -->
          <div class="banner-msg-box">
            <div class="index-title">开放海外支付之旅</div>
            <div class="pay-btn">免费注册</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <style scoped lang="less">
.home {
  width: 100%;
  margin: 0 auto;
  .home-item {
    .banner {
      overflow: hidden;
      width: 100%;
      // background: linear-gradient(135deg, #000 0%, #333 100%);
      background: #fff;
      border-radius: 8px;
      margin-bottom: 2rem;
      .banner-img {
        width: 100%;
        height: 37.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../../assets/imgs/home-img/sy-index.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        .banner-msg-box {
          width: 80rem;
          .msg-index {
            display: flex;
            justify-content: space-between;
            // align-items: center;
            .msg-item-box {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .msg-item {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 23.7rem;
                height: 4.25rem;
                border-radius: 10rem;
                border: 2px solid #cca46b;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 1.125rem;
                color: #cca46b;
                font-style: normal;
                .msg-item-icon {
                  margin-right: 2rem;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
            .msg-icon-text-item {
              .msg-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 7.6rem;
                height: 7.6rem;
                border-radius: 50%;
                border: 2px solid #cca46b;
                margin: auto;
                margin-bottom: 1rem;
                img {
                  width: 3.25rem;
                }
              }
              .msg-text-txt {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 1.125rem;
                color: #ffffff;
                font-style: normal;
                margin-top: 1rem;
              }
            }
            .msg-img-text-box {
              width: 100%;
              margin-top: 1.5rem;
              display: flex;
              justify-content: center;
              .msg-img-box {
                width: 26.4rem;
                height: 26.4rem;
                flex-shrink: 0;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
              .msg-img-text {
                flex: 1;
                padding: 0 3rem;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .img-text-item {
                  .img-title {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .img-title-text {
                      text-align: left;
                      margin-left: 1.5rem;
                      .text-txt {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 500;
                        font-size: 1rem;
                        color: #cca46b;
                        text-align: left;
                        font-style: normal;
                      }
                    }
                  }
                  .img-content {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 0.875rem;
                    color: #ffffff;
                    line-height: 1.375rem;
                    text-align: left;
                    font-style: normal;
                    margin-top: 1rem;
                  }
                }
              }
              .msg-img-content {
                width: 38rem;
                .content-txt {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 1.125rem;
                  color: #cca46b;
                  line-height: 2rem;
                  text-align: left;
                  font-style: normal;
                }
              }
            }
          }
          .pay-btn {
            background: #cca46b;
            width: 20.25rem;
            height: 3.375rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 1.5rem;
            color: #ffffff;
            line-height: 2.1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-style: normal;
            margin: auto;
            border-radius:50rem ;
            margin-top: 1.5rem;
          }
        }
        img {
          object-fit: cover;
        }
      }
      .cptd-bg {
        background-image: url("../../assets/imgs/home-img/cptd-bg.png");
      }
      .registaration-bg {
        background-image: url("../../assets/imgs/home-img/registaration-bg.png");
      }
      .fund-bg {
        background-image: url("../../assets/imgs/home-img/fund-bg.png");
      }
      .about-bg {
        background-image: url("../../assets/imgs/home-img/about-bg.png");
      }
      .pay-bg {
        background-image: url("../../assets/imgs/home-img/pay-bg.png");
        height: 16.75rem !important;
      }
    }

    .banner-content {
      width: 80rem;
      margin: auto;
      text-align: center;
      .content-index {
        .index-text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 1rem;
          color: rgba(0, 0, 0, 0.85);
          font-style: normal;
          margin: 1rem 0;
        }
        .img-content {
          width: 51.4rem;
          margin: 1.5rem auto;
        }
        .msg-small-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 1.5rem 0;
          .msg-small-item {
            width: 24.875rem;
            padding: 2rem;
            box-sizing: border-box;
            .small-title {
              font-weight: 600;
            }
            .small-icon {
            }
            .small-text {
              height: 10.2rem;
              margin-top: 2rem;
              padding: 1.5rem 4rem;
              box-sizing: border-box;
              border-radius: 50rem;
              border: 2px dashed #979797;
            }
          }
          .msg-img-text-item {
            .text-box {
              width: 17.375rem;
              height: 10.75rem;
              padding: 1rem;
              box-sizing: border-box;
              background: #cca46b;
              border-radius: 0.75rem;
              color: #fff;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              .text-box-title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 1.5rem;
                line-height: 2.1rem;
                font-style: normal;
              }
              .text-box-txt {
                margin-top: 1rem;
                font-size: 1rem;
                line-height: 1.5rem;
              }
            }
            .img-box {
              width: 17.375rem;
              height: 10.75rem;
              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }
          }
        }
        .business-img-txt-box {
          .business-img-box {
            width: 100%;
            height: 20rem;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .business-txt-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 3rem 0;
            .business-txt-item {
              width: 24rem;
              height: 16rem;
              border-radius: 0.75rem;
              border: 2px dashed #cca46b;
              padding: 1rem;
              box-sizing: border-box;
              .business-title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 1.5rem;
                color: #cca46b;
                line-height: 2.1rem;
                text-align: left;
                font-style: normal;
              }
              .business-txt {
                margin-top: 0.5rem;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 1rem;
                color: rgba(0, 0, 0, 0.85);
                line-height: 1.8rem;
                text-align: left;
                font-style: normal;
              }
            }
          }
        }
      }
    }
  }
}
.index-title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 1.875rem;
  color: #cca46b;
  line-height: 2.625rem;
  font-style: normal;
  margin-top: 3.2rem;
}
.index-title-2,
.msg-text-title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 1.125rem;
  color: #cca46b;
  line-height: 1.56rem;
  font-style: normal;
}
</style> 